<template>
  <div class="app-container">
    <el-form ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="交接人">
        <el-select placeholder="请选择交接人" filterable v-model="fromUser" @change="takeFromUser">
          <el-option v-for="dict in users"
                     :key="dict.userId"
                     :label="dict.nickName"
                     :value="dict.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button :disabled="!fromUser" type="success" @click="handleQuery">查询交接业务</el-button>
      </el-form-item>
      <el-form-item label="接收人">
        <el-select placeholder="请选择接收人" filterable v-model="toUser" @change="takeToUser">
          <el-option v-for="dict in toUserList"
                     :key="dict.userId"
                     :label="dict.nickName"
                     :value="dict.userId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-radio-group class="drawer-radio" v-model="picked">
        <el-radio :label="1" @click.native.prevent="handleChangeitem(1)" style="margin-top: 10px">复制</el-radio>
      </el-radio-group>

      <el-form-item label="">
        <el-button :disabled="!toUser || !fromUser || guid1.length <= 0" type="primary" @click="submitForm" style="margin-left: 15px">交接</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="datas" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="客户名称" align="center" prop="name"/>
      <el-table-column label="联系人" align="center" prop="contact"/>
      <el-table-column label="联系电话" align="center" prop="contactno"/>
      <el-table-column label="地址" align="center" prop="province"/>
    </el-table>


        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getConts"
        />
  </div>
</template>

<script>
  import {getUserList} from "@/api/public";
  import {getTranstoUserList} from "@/api/system/user";
  import {handover,customerVo} from "@/api/handover/record";
  import {getCustomerVolist,} from "@/api/handover/order";

  export default {
    name: "customer",
    data() {
      return {
        // 遮罩层
        loading: false,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ftdIDs:"",
        ftdIDs1:[],
        guid: "",
        guid1:[],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 票据到期提醒表表格数据
        datas: [],
        data2:[],
        users: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        toUserList: [],
        fromUser: '',
        toUser: '',
        subStauts: false,
        sumBalance:'',
        picked:""

      };
    },
    created() {
      // this.getConts();
      this.getUserList();
    },
    methods: {
      handleChangeitem(e){
        // console.log("v-model绑定的值："+this.picked,"传进来的值"+e)
        e===this.picked?this.picked=0:this.picked=e;
        console.log(this.picked)
      },

      takeFromUser(uid) {
        this.getToUsers(uid);
        this.toUser = '';
        this.getConts();
      },
      takeToUser(uid){
        this.subStauts=true;
      },

      /** 查询交接人*/
      getUserList() {
        getUserList().then(response => {
            this.users = response.data;
          }
        );
      },

      /** 查询交接内容*/
      getConts() {
        this.picked=0;
        this.loading=true;
        this.queryParams.userId=this.fromUser;
        getCustomerVolist(this.queryParams).then(response=>{
          this.datas=response.rows;
          this.total=response.total;
          this.loading=false
        })

      },
      /** 查询接交人 */
      getToUsers(id) {
        this.toUserList = [];
        getTranstoUserList({Id: id}).then(response => {
          this.toUserList = response.data;
        });
      },

      //查询按钮操作
      handleQuery(){
        this.queryParams.pageNum=1;
        this.getConts();
      },

      //多选框选中数据
      handleSelectionChange(selection){
        this.guid1=selection.map(item=>item.guid);
        this.guid=this.guid1.join(",");
        console.log(this.guid)
      },

      /** 提交按钮 */
      submitForm() {
        this.subStauts = true;
        // const guid=row.guid || this.ids;
        this.$confirm('确定要执行该操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',

        }).then(async () => {
          await customerVo({fromUserId: this.fromUser, toUserId: this.toUser,guid:this.guid,picked:this.picked});
            this.msgSuccess("交接成功");
            this.guid1 = [];
            this.guid = '';
            this.getConts();
            this.subStauts = false;
        });
      },
    },
  };
</script>
